<script setup lang="ts">
import { TActivityApply } from "@/global";
import { computed } from "vue";

const { source } = defineProps<{
  source: TActivityApply;
}>();

// const statusText = {
//   0: "未开始",
//   1: "正在进行",
//   2: "已结束",
// };

const auditStatusText = {
  0: "报名审核中",
  1: "审核通过",
  2: "报名未通过",
};
//押金状态 0 未交 1 已交 2 已退
const depostStatusText = {
  0: "待交押金",
  1: "已交押金",
  2: "押金已退回"
}


const tagText = computed(() => {
  const { audit_status, deposit_status } = source;
  return audit_status == 1 ? depostStatusText[deposit_status] : auditStatusText[audit_status];
})

</script>
<template>

  <navigator hover-class="none"
             class="rounded-[40px] bg-primary overflow-hidden"
             :url="`/packageMerchant/pages/enroll/activity?id=${source.id}&act_id=${source.act_id}&m_id=${source.merchant_id}`">

    <view class="relative flex p-2">
      <image class="flex-none mr-1.5 w-[250px] h-[187px] rounded-[32px]"
             :src="source.title_img" />

      <view class="flex-auto text-dark">
        <view class="text-xl mt-1">{{ source.title }}</view>

        <view class="mt-0.5 text-xs">
          <view class="whitespace-pre-line">{{ source.act_time }}</view>
          <view>{{ source.address }}</view>
        </view>
      </view>

      <view class="absolute right-2.5 bottom-0 px-6 py-1 translate-y-1/2 rounded-full text-light  text-sm"
            :class="source.audit_status == 2 ? 'bg-error' : 'bg-dark '">
        {{ tagText }}
      </view>
    </view>

    <view class="py-1 w-full px-[90px] bg-theme h-[50px]">
      <!-- <text class="text-white text-sm">
        {{ statusText[source.act_status] }}
      </text> -->
    </view>
  </navigator>
</template>
